<!--
 * @Description: 服务中心模块
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-10-30 02:43:45
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-12-12 20:18:23
 * @FilePath: /lieshou-app/pages/activite.vue
-->

<template>
	<view class="page-content">

		<!-- <view class="list-box" style="width: 100%;height:550rpx;background-color: red;"> -->
		<z-paging ref="paging" :hide-no-more-by-limit="10" v-model="dataList" @query="queryList">
			<view slot="top">
				<z-nav title="活动" showBg="true" :showBack="false" color="#333"></z-nav>
				<!-- head轮播图模块 -->
				<zActivityHead :headIns='headIns' ></zActivityHead>
				<view style="margin:28rpx 0rpx 20rpx 0rpx;">
					<zLabel :labelList='labelList' :labelId="labelId" @getTab="getTab"></zLabel>
				</view>
			</view>
			<!-- 活动列表 -->
			<view class="activity-modules">
				<zActivityList :activity-list="dataList" type='home'></zActivityList>
			</view>
		</z-paging>

		<!-- </view> -->
	</view>
</template>

<script setup>
	import {
		onReady
	} from '@dcloudio/uni-app';
	import zAuthPopup from '@/components/z-auth-popup.vue'
	import zLabel from '@/components/z-label.vue';
	import zActivityList from '@/components/z-activity-list.vue';
	import zActivityHead from '@/components/z-activity-head.vue';
	import zNav from '@/components/z-nav.vue';
	export default {
		components: {
			zAuthPopup,
			zLabel,
			zActivityList,
			zActivityHead,
			zNav
		},
		data() {
			return {
				headIns: {
					jumpTitle: '前往 选课中心',
					title: '做自己感情的实践者',
					tag: ['免费学习', '关系推进', '经营恋爱','实操训练']
				},
				labelId:0,
				labelList:[{
					name:'新增活动'
				},{
					name:'日常活动'
				},{
					name:'热门活动'
				},],
				dataList: [],
				tabList: [],
				tabIndex: 0,
				navbarHeight: 0,
				paddingTop: 0,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1500,
				activityList: [{
					title: '活动名称',
					date: "2024-10-31"
				}, {
					title: '活动名称',
					date: "2024-10-31"
				}],
				other: [{
						tit: '《用户协议》',
						type: 'doc', // doc自行下载打开文档 page跳转页面
						content: 'https://cdn.baidu.com/14_dbd7dcc9.docx', // 文档地址/页面跳转地址
					},
					{
						tit: '《隐私政策》',
						type: 'page', // doc自行下载打开文档 page跳转页面
						content: 'https://cdn.baidu.com/14_dbd7dcc9.docx', // 文档地址/页面跳转地址
					},
				]
			};
		},
		mounted() {
			// #ifdef MP-WEIXIN
			const menuButton = uni.getMenuButtonBoundingClientRect();
			this.navbarHeight = menuButton.height + (menuButton.top - uni.getSystemInfoSync().statusBarHeight);
			this.paddingTop = uni.getSystemInfoSync().statusBarHeight;
			// #endif
			// #ifdef APP-PLUS || H5
			this.navbarHeight = 40
			// #endif
			this.initData()
			console.log('global.$apis', this.$apis)
		},
		onShow(){
			this.queryList(1,10)
		},
		
		onLoad() {
			// #ifdef MP-WEIXIN
			this.$utils.showShare('分享免费学习的平台给你~', '', '')
			// #endif
		},
		methods: {
			getTab(item,index){
				this.labelId=item.index
				// this.queryList(1,10)
			},
			async initData() {
				// 存储隐私协议状态
				try {
					this.isShowAuthIns = await this.$utils.getStorage('isShowAuthIns')
				} catch (e) {
					//TODO handle the exception
				}
			},

			getDetails() {
				uni.navigateTo({
					url: "/pages/home/index"
				})
			},
			queryList(pageNo, pageSize) {
				// 这里的请求只是演示，请替换成自己的项目的网络请求
				this.$apis.activityList({
					page: pageNo,
					size: pageSize,
					// id:this.labelId
				}).then((res) => {
					this.$utils.showLog('获取活动列表数据', res)
					// 设置本地分页并将服务端返回的完整列表数据传给z-paging，滚动到底部会在本地进行分页数据拼接，不会触发分页请求。下拉刷新或reload时会重新触发queryList
					this.$refs.paging.complete(res.list);
				}).catch(() => {
					// 如果请求失败写this.$refs.paging.complete(false)，会自动展示错误页面
					// 注意，每次都需要在catch中写这句话很麻烦，z-paging提供了方案可以全局统一处理
					// 在底层的网络请求抛出异常时，写uni.$emit('z-paging-error-emit');即可
					this.$refs.paging.complete(false);
				})
			}
		},
	};
</script>
<style lang="scss">
	// 活动模块
	.activity-modules {
		width: 750rpx;
		margin: 0 auto;
		text-align: center;
	}
</style>